<!doctype html>
<html lang="zh-CN">

<head>
    <title>登陆</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div id='app' class='dis-cen' v-loading='loading' v-cloak>

        <!-- 修改密码框 -->
        <div id='mask' v-if='offForget'></div>
        <transition enter-active-class='animated bounceInDown' leave-active-class='animated fadeOutUp'>
            <div id='mask-1' v-if='offForget'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>修改密码</span>
                        <img class='hover' @click='offForget=false;' src="./img/close.svg" style="width:22px;height:22px;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="手机号/账号">
                        </div>
                        <div class='dis-spa edit-invi-code'>
                            <input type="text" placeholder="验证码">
                            <span class='hover'>获取验证码</span>
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="新密码（8至20位字母或数字）">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认新密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 修改密码框 -->

        <div class='dis-spa login-wrap'>
            <div>
                <img src="./img/login-bg2.png" width="100%" height="100%">
            </div>
            <div class='login-input'>
                <div>
                    <img class='logo-img' src="./img/login-bg3.png" height="50px">
                    <input type="text" placeholder="请输入手机号" v-model='mobil'>
                    <input class='put' type="password" placeholder="请输入密码" v-model='pas'>
                    <div class='agree hover' @click='offAgr=!offAgr;'>
                        <img :src="offAgr?'./img/yes.png':'./img/no.png'">
                        <span>记住密码</span>
                    </div>
                    <a class='login-btn hover' @click='login'>马上登陆</a>
                    <p class='dis-spa forget'>
                        <span class='hover' @click='offForget=true;'>忘记密码？</span>
                        <a href="regiset1.html">去注册</a>
                    </p>
                </div>

            </div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/com.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/el/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loading: false,
                mobil: '',
                pas: '',
                //记住密码
                offAgr: false,
                //控制忘记密码弹窗
                offForget: false
            },
            methods: {
                login: function() {
                    var This = this;
                    if(!this.mobil){
                        this.$message.error('请输入您的手机号！');
                        return;
                    }
                    if(!this.pas){
                        this.$message.error('请输入您的密码！');
                        return;
                    }
                    this.loading = true;
                    AJAX({
                        url: LOGIN,
                        app: this,
                        data: {
                            mobile: this.mobil,
                            password: this.pas
                        },
                        success: function(data) {
                            This.loading = false;
                            if (data.Status == '0') {
                                // var op = {
                                //     path: '/'
                                // };
                                // if (This.offAgr) {
                                //     op.expires = 7;
                                // }
                                // $.cookie('token', data.Data, op);
                                var curr = Date.parse(new Date()) / 1000;
                                if (This.offAgr) {
                                    curr += 604800;
                                    localStorage.setItem('time', '7');
                                } else {
                                    curr += 86400;
                                }
                                _setItem('token', data.Data, curr);
                                This.$message.error('登录成功');
                                setTimeout(function() {
                                    _openHref({
                                        url: './index.html'
                                    });
                                }, 1200);
                            } else {
                                This.$message.error('登录失败，请检查用户名或登录密码是否正确');
                            }
                        }
                    });
                }
            }
        });
    </script>

</body>

</html>